<template>
	<view class="supplyDemand">
		<h5_header>我的供应</h5_header>
		<view class="page">
			<view class="supply" v-if="topStu">
				<!-- #ifndef H5 -->
				<image src="https://oss-shop.cciinet.com/files/MiniProgram/top_re.png" v-if="top_re" class="top_re" mode="widthFix"></image>
				<view class="top_re_span" @click="handleCloseTopRe"></view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image src="https://oss-shop.cciinet.com/files/MiniProgram/top_re.png" v-if="top_re" class="h5_top top_re" mode="widthFix"></image>
				<view class="h5_top top_re_span" @click="handleCloseTopRe"></view>
				<!-- #endif -->
				<view class="supply_list" :class="top_re?'supply_list1':''">
					<view v-for="v in list" :key="v.id">
						<view class="list_item" @click="$handleOpenUrl(`/pages/shop/detail?stu=1&id=${v.id}`)">
							<view class="img_box">
								<image :src="v.images" alt="" />
								<view class="em" :class="v.goodsType === 0?'active':''">
									{{ v.goodsType === 0 ? "现货" : "期货" }}
								</view>
							</view>
							<view class="list_info">
								<view>
									<wiew class="h1">
										<view class="span">{{ v.title }}</view>
									</wiew>
									<view class="p">产地：{{ v.origin }}</view>
									<view class="p">仓库：{{ v.provinceName + v.cityName }}</view>
								</view>
								<view style="text-align: right">
									<view class="h2">{{v.formatCreateDate}}</view>
									<view class="h3" v-if="!userId">查看详情</view>
									<view class="h3" v-if="userId">
										{{v.goodsPrice}}{{
			                                v.priceType == 0
			                                    ? "元/吨"
			                                    : v.priceType == 1
			                                    ? "元/KG"
			                                    : v.priceType == 2
			                                    ? "美元/吨"
			                                    : v.priceType == 3
			                                    ? "美元/KG"
			                                    : ""
			                            }}
									</view>

								</view>
							</view>
						</view>
						<view class="supply_bottom">
							<view class="bot_left">
								<image src="https://oss-shop.cciinet.com/files/MiniProgram/see12.png" mode="widthFix"></image>
								<view class="span">浏览{{v.viewTimes}}次</view>
							</view>
							<view class="bot_right">
								<view class="right" @click="handleTop2(v.id,v.isTop,v.updateDate,v.companyId)">
									<image src="https://oss-shop.cciinet.com/files/MiniProgram/top2.png" mode="widthFix"></image>
									<view class="span">置顶</view>
								</view>
								<view class="right" @click="$handleOpenUrl('/pages/shop/add?id='+v.id)">
									<image src="https://oss-shop.cciinet.com/files/MiniProgram/edit_shop.png" mode="widthFix"></image>
									<view class="span">修改</view>
								</view>
								<view class="right" @click="handleOffSelf(v.id,v.enable)">
									<image v-if="v.enable==0" src="https://oss-shop.cciinet.com/files/MiniProgram/off_self.png" mode="widthFix"></image>
									<image v-if="v.enable==1" src="https://oss-shop.cciinet.com/files/MiniProgram/putOn.png" mode="widthFix"></image>
									<view class="span">{{v.enable==0?"下架":"上架"}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="demand" v-if="!topStu">
				<view class="demand_list">
					<view class="list_item" v-for="v in list" :key="v.id" @click="$handleOpenUrl(`/pages/shop/detail?stu=2&id=${v.id}`)">
						<view class="h1">
							<view class="span">{{ v.title }}</view>
							<view class="em">{{ v.formatCreateDate }}</view>
						</view>
						<view class="list_info">
							<view class="d">
								<view class="p">
									产地：<b>{{ v.origin }}</b>
								</view>
								<view class="p">
									仓库：<b>{{ v.provinceName + v.cityName }}</b>
								</view>
							</view>
							<view class="d">
								<view class="p">
									意向价格：<view class="i" v-if="userId">{{v.goodsPrice || '面议' }}{{
										v.goodsPrice ? (v.priceType == 0
			                                        ? "元/吨"
			                                        : v.priceType == 1
			                                        ? "元/KG"
			                                        : v.priceType == 2
			                                        ? "美元/吨"
			                                        : v.priceType == 3
			                                        ? "美元/KG"
			                                        : "") : ''
			                                    
			                                }}</view>
									<view class="i" v-if="!userId">查看详情</view>
								</view>
								<view class="p">
									采购数量：<view class="b1">{{ v.goodsAmount
			                                }}{{
			                                    v.priceType == 1 || v.priceType == 3
			                                        ? "KG"
			                                        : "吨"
			                                }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="popup" v-if="classify" @touchmove.prevent @click="classify = false">
				<view v-if="classify">
					<view class="i1"></view>
					<view class="classify">
						<view class="ul">
							<view class="li" @click="
                                classifyStu = i + 1;
                                getSupplyInfoBySupply1();
                            "
							 :class="classifyStu == i + 1 ? 'active' : ''" v-for="(v, i) in classifyList" :key="i">
								{{ v }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="popup" v-if="state" @touchmove.prevent @click="state = false">
				<view v-if="state">
					<view class="i"></view>
					<view class="classify">
						<view class="ul">
							<view class="li" @click="
                                stateStu = v.id;
                                getSupplyInfoBySupply1();
                            "
							 :class="stateStu == v.id ? 'active' : ''" v-for="v in stateList" :key="v.id">
								{{ v.name }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loading-text">
				{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
			</view>

			<!-- <view class="release_btn" @click="handleFabu(topStu)">
				<view class="inner fs_26 fw_600">发布</view>
			</view> -->

		</view>
	</view>
</template>
<script>
	import {
		getSupplyInfoBySupply,
		findCountryList,
		getAreaByParentId,
		findCountryList1,
		getValueByTypeCode,
		saveGuideOperate,
		updateSupplyDemandUpdateDate,
		updateSupplyEnable
	} from "@/api/shop/index.js";
	import {
		$handleStatistcs
	} from "@/utils/statistics.js"
	import h5_header from "@/components/h5_header.vue"
	export default {
		components: {
			h5_header
		},
		data() {
			return {
				topStu: true,
				list: [],
				page: 1,
				pageSize: 15,
				loading: false,
				finished: false,
				classify: false,
				classifyList: ["猪", "牛", "羊", "鱼", "虾", "蟹", "禽"],
				classifyStu: "",
				countryList: [],
				place: false,
				origin: "",
				countryList1: ["国内", "国外", "不限"],
				stateList: [{
						id: "0",
						name: "现货"
					},
					{
						id: "1",
						name: "期货"
					},
					{
						id: "-1",
						name: "不限"
					},
				],
				stateStu: "",
				state: false,
				addr: false,
				addrList: [],
				addrId: [],
				seconds: 60,
				// showDialog: false,
				timer: null,
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				userId: "",
				isLoad: 1,
				fetche_stu: false,
				release_modal: false,
				time_modal: 0,
				timer: "",
				top_re: true
			};
		},
		onLoad() {
			this.findCountryList();
			this.getAreaByParentId();
			this.getSupplyInfoBySupply();
			this.loading = true;
			this.userId = uni.getStorageSync("userId")

		},

		// 下拉刷新
		onPullDownRefresh() {
			this.getSupplyInfoBySupply1();
		},
		onReachBottom() {
			this.loadingType = 1
			this.getSupplyInfoBySupply()
		},
		onShow() {
			this.userId = uni.getStorageSync("userId")
			if (this.isLoad == 2) {
				this.getSupplyInfoBySupply1();
				this.isLoad = 1
			}
			$handleStatistcs()
		},
		methods: {
			handleCloseTopRe() {
				this.top_re = false
			},
			//置顶
			handleTop2(id,top,date,companyId) {
				updateSupplyDemandUpdateDate({
					id: id,
					isTop: top,
					updateDate: date,
					companyId: companyId
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: "置顶成功",
							icon: "none"
						})
						this.getSupplyInfoBySupply1()
					} else if (res.code == 1) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: res => {
								if (res.confirm) {
									this.$handleOpenUrl('/pages/login/personalData')
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			handleOffSelf(id,stu) {
				uni.showModal({
					title: '温馨提示',
					content: `${stu==0?"您确定要下架吗？下架后其他人不可见":"上架前请确认该商品的信息已经是最新的。"}`,
					success: res => {
						if (res.confirm) {
							updateSupplyEnable({
								id: id,
								enable:stu==0?1:0
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: `${stu==0?"下架":"上架"}成功`,
										icon: "none"
									})
									this.getSupplyInfoBySupply1()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			findCountryList() {
				findCountryList1().then((res) => {
					if (res.code === 0) {
						this.countryList = [
							res.data,
							res.data[0].children || []
						]
						console.log(this.countryList)
					}
				});
			},
			handleColumnchange(column) {
				if (column.detail.column == 0) {
					// #ifdef H5
					this.countryList[1] = this.countryList[0][column.detail.value].children || []
					// #endif
					// #ifdef !H5
					this.$set(this.countryList, 1, this.countryList[0][column.detail.value].children || [])
					// #endif
				}
			},
			handleColumnchange1(column) {
				if (column.detail.column == 0) {
					// #ifdef H5
					this.addrList[1] = this.addrList[0][column.detail.value].children || []
					// #endif
					// #ifdef !H5
					this.$set(this.addrList, 1, this.addrList[0][column.detail.value].children || [])
					// #endif
				}
			},

			strNumSize(tempNum) {
				let stringNum = tempNum.toString()
				let index = stringNum.indexOf(".")
				let newNum = stringNum
				if (index !== -1) {
					newNum = stringNum.substring(0, index)
				}
				return newNum.length
			},
			numberFormat(value) {
				let moneyUnits = ["", "万", "亿", "万亿"]
				let dividend = 10000
				let curentNum = parseFloat(num) //转换数字
				let curentUnit = moneyUnits[0] //转换单位
				for (let i = 0; i < 4; i++) {
					curentUnit = moneyUnits[i]
					if (strNumSize(curentNum) < 5) {
						break;
					}
					curentNum = curentNum / dividend
				}
				let m = {
					num: 0,
					unit: ""
				}
				m.num = curentNum.toFixed(2)
				m.unit = curentUnit
				return m
				// var param = {};
				// var k = 10000,
				// 	sizes = ["", "万", "亿", "万亿"],
				// 	i;
				// if (value < k) {
				// 	param.value = value;
				// 	param.unit = "";
				// } else {
				// 	i = Math.floor(Math.log(value) / Math.log(k));

				// 	param.value = (value / Math.pow(k, i)).toFixed(0);
				// 	param.unit = sizes[i];
				// }
				// return param.value + param.unit;
			},

			getAreaByParentId() {
				getAreaByParentId().then((res) => {
					if (res.code === 0) {
						this.addrList = [
							res.data,
							res.data[0].children,
						]
					}
				});
			},
			onConfirm(event) {
				this.origin = this.countryList[1][event.detail.value[1]].name;
				this.getSupplyInfoBySupply1();
			},
			onConfirm1(event) {
				this.addrId = [
					this.addrList[0][event.detail.value[0]].value,
					this.addrList[1][event.detail.value[1]].value,
				];
				this.getSupplyInfoBySupply1();
			},
			onConfirm23(event) {
				console.log(event)
				this.origin = this.countryList1[event.detail.value];
				this.getSupplyInfoBySupply1();
			},
			handleTab(stu) {
				clearTimeout(this.timer)
				this.topStu = stu;
				this.page = 1;
				this.origin = ""
				this.list = [];
				this.loading = true;
				this.finished = false; //重制
				this.getSupplyInfoBySupply();
				if (this.userId) {
					this.timer = setTimeout(() => {
						this.getValueByTypeCode()
					}, 9000)
				}
			},
			getSupplyInfoBySupply() {
				getSupplyInfoBySupply({
					page: {
						current: this.page,
						size: this.pageSize,
						desc: ["create_date"],
					},
					shopSupplyDemand: {
						goodsCategory: this.classifyList[this.classifyStu - 1] || null,
						goodsType: this.stateStu || null,
						origin: this.origin || null,
						provinceId: this.addrId[0] || null,
						cityId: this.addrId[1] || null,
						type: this.topStu ? 0 : 1,
						userId: uni.getStorageSync("userId") || "",
						myUserId: uni.getStorageSync("userId") || "",
					}
				}).then((res) => {
					if (res.code === 0) {
						let stu = 1
						if (res.data.records.length == 0 || res.data.records.length < 15) {
							stu = 2
						}
						this.loadingType = stu
						this.page++;
						let data = res.data.records;
						this.list = [...this.list, ...data];
					}
				});
			},
			getSupplyInfoBySupply1() {
				this.list = [];
				this.loading = true;
				this.finished = false;
				this.page = 1;
				this.pageSize = 15;
				getSupplyInfoBySupply({
					page: {
						current: this.page,
						size: this.pageSize,
						desc: ["create_date"],
					},
					shopSupplyDemand: {
						goodsCategory: this.classifyList[this.classifyStu - 1] || null,
						goodsType: this.stateStu || null,
						origin: this.origin || null,
						provinceId: this.addrId[0] || null,
						cityId: this.addrId[1] || null,
						type: this.topStu ? 0 : 1,
						userId: uni.getStorageSync("userId") || "",
						myUserId: uni.getStorageSync("userId") || "",
					}
				}).then((res) => {
					if (res.code === 0) {
						let stu = 1
						if (res.data.records.length == 0 || res.data.records.length < 15) {
							stu = 2
						}
						this.loadingType = stu
						this.page++;
						this.list = res.data.records;
						uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
					}
				});
			},
			numberFormat(value) {
				var param = {};
				var k = 10000,
					sizes = ["", "万", "亿", "万亿"],
					i;
				if (value < k) {
					param.value = value;
					param.unit = "";
				} else {
					i = Math.floor(Math.log(value) / Math.log(k));

					param.value = (value / Math.pow(k, i)).toFixed(0);
					param.unit = sizes[i];
				}
				return param.value + param.unit;
			},
			open() {
				this.seconds = 60;
				this.timer = setInterval(() => {
					this.seconds--;
					if (this.seconds == 0) {
						this.reset();
					}
				}, 1000);
			},
			// close() {
			//     this.reset();
			// },
			reset() {
				// this.showDialog = false;
				clearInterval(this.timer);
				this.timer = null;
			},
			handleFabu(topStu) {
				this.$handleOpenUrl(topStu ? '/pages/shop/add' : '/pages/shop/add1')
			},
		},
	};
</script>
<style scoped lang="scss">
	.supplyDemand {
		width: 100%;
		background: #f7f9fe;
		position: relative;

		.top_re {
			width: 100%;
			position: fixed;
			top: 0;

			z-index: 99;
		}

		.top_re_span {
			width: 60upx;
			height: 50upx;
			position: fixed;
			top: 0;
			right: 0;
			opacity: 0;
			z-index: 100;
		}
		
		.h5_top {
			top: 88upx;
		}

		.release_modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .5);
			z-index: 99;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.release_content {
				padding: 0 51upx;
				background: #fff;
				height: 860upx;
				border-radius: 8upx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 415upx;
					margin-top: 55upx;
				}

				.h1 {
					font-size: 48upx;
					font-weight: bold;
					color: #333333;
					margin-top: 45upx;
					line-height: 1;
				}

				.p {
					font-size: 30upx;
					color: #333333;
					margin-top: 37upx;
					line-height: 1;
				}

				.btn {
					width: 580upx;
					height: 90upx;
					background: linear-gradient(0deg, #FDA033, #FF5A03);
					border-radius: 45upx;
					margin-top: 79upx;
					font-size: 40upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 90upx;
				}
			}

			.img {
				width: 34upx;
				margin-top: 36upx;
			}
		}

		.loading-text {
			width: 100%;
			text-align: center;
		}

		.screen {
			width: 100%;
			position: fixed;
			top: 88upx;
			display: flex;
			border-top: 2upx solid #f7f9fe;
			z-index: 9;
			box-shadow: 0upx 4upx 8upx 0upx rgba(0, 0, 0, 0.05);

			.screen_item {
				flex: 1;
				background: #fff;
				border-right: 2upx solid #f7f9fe;
				height: 80upx;
				font-size: 26upx;
				color: #666666;
				display: flex;
				align-items: center;
				justify-content: center;

				.span {
					padding-right: 10upx;
				}

				.i {
					width: 0;
					height: 0;
					display: inline-block;
					border: 12upx solid;
					border-color: #cccccc transparent transparent transparent;
					vertical-align: middle;
					margin-top: 10upx;
				}
			}

			.screen_item:last-child {
				border-right: 0;
			}
		}

		.page {
			.supply {
				width: 100%;
				height: 100%;

				.supply_list {
					height: 100%;
					padding: 20upx 31upx 0upx 28upx;

					.supply_bottom {
						height: 64upx;
						width: 100%;
						background: #fff;
						margin-bottom: 12upx;
						border-top: 1upx solid #EBEBEB;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.bot_left {
							display: flex;
							align-items: center;
							padding-left: 16upx;

							image {
								width: 28upx;
							}

							.span {
								font-size: 22upx;
								color: #999999;
								margin-left: 6upx;
							}
						}

						.bot_right {
							display: flex;
							padding-right: 16upx;

							.right {
								display: flex;
								align-items: center;
								margin-left: 51upx;

								image {
									width: 26upx;
								}

								.span {
									font-size: 22upx;
									color: #999999;
									margin-left: 6upx;
								}
							}
						}
					}

					.list_item {
						height: 178upx;
						background: #fff;
						display: flex;
						align-items: center;
						border-radius: 8upx;
						padding-right: 16upx;
						// margin-bottom: 0;

						.img_box {
							position: relative;
							width: 154upx;
							height: 154upx;
							margin-left: 10upx;
							margin-right: 15upx;
						
							image {
								width: 154upx;
								height: 154upx;
								border-radius: 8upx;
							}
						
							.em {
								position: absolute;
								top: 0;
								left: 0;
								display: inline-block;
								width: 60upx;
								height: 30upx;
								background: #f0f3ff;
								border-radius: 0 0 16upx 0;
								text-align: center;
								line-height: 30upx;
								font-size: 20upx;
								color: #00428e;
							}
						
							.active {
								background: #fde7dd;
								color: #ea5520;
							}
						}
						.list_info {
							width: 100%;
							display: flex;
							justify-content: space-between;
							flex: 1;

							.h1 {
								font-size: 30upx;
								color: #333333;
								line-height: 1;
								display: flex;
								align-items: center;
								margin-bottom: 31upx;

								.span {
									width: 300upx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									word-break: break-all;
								}

							}

							.p {
								font-size: 24upx;
								color: #666666;
								width: 300upx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						.h2 {
							font-size: 20upx;
							color: #999999;
						}

						.h3 {
							font-size: 30upx;
							color: #ea5520;
							margin-top: 64upx;
							width: 200upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-weight: bold;
						}
					}
				}

				.supply_list1 {
					margin-top: 60upx;
				}
			}

			.demand {
				width: 100%;
				height: 100%;

				.demand_list {
					height: 100%;
					padding: 180upx 31upx 0upx 28upx;

					.list_item {
						height: 168upx;
						background: #ffffff;
						border-radius: 8upx;
						margin-bottom: 8upx;
						padding-left: 25upx;
						padding-right: 25upx;
						padding-top: 23upx;

						.h1 {
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							line-height: 1;

							.span {
								font-size: 30upx;
								color: #333333;
								width: 410upx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								word-break: break-all;
							}

							.em {
								font-size: 20upx;
								color: #999999;
							}
						}

						.list_info {
							display: flex;

							.d {
								width: 50%;
								margin-top: 27upx;

								.p {
									font-size: 24upx;
									color: #666666;
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									word-break: break-all;
									display: flex;
								}

								.b1 {
									font-size: 26upx;
									color: #333333;
									font-weight: normal;
								}

								.i {
									font-size: 26upx;
									color: #ea5520;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}

		.popup {
			position: fixed;
			top: 170upx;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
			width: 100%;
			height: 100%;

			.classify {
				margin: 0 30upx;
				height: 196upx;
				background: #ffffff;
				border-radius: 8upx;
				margin-top: -12upx;
				padding: 0 30upx;

				.ul {
					display: flex;
					align-items: center;
					height: 196upx;
					justify-content: space-around;

					.li {
						padding: 16upx 24upx;
						border: 1upx solid #666;
						border-radius: 8upx;
						font-size: 28upx;
						color: #666;
					}

					.active {
						background: #f7f9fe;
						border: 1upx solid #00428e;
						color: #00428e;
					}
				}
			}

			.i1 {
				display: inline-block;
				border: 12upx solid;
				border-color: transparent transparent #fff transparent;
				margin-left: 80upx;
			}

			.i {
				display: inline-block;
				border: 12upx solid;
				border-color: transparent transparent #fff transparent;
				margin-left: 450upx;
			}
		}


		.supply_header {
			width: 100%;
			height: 88upx;
			background: #fff;
			display: flex;
			align-items: center;
			position: fixed;
			z-index: 9;
			justify-content: center;
			top: 0;

			.i {
				width: 18upx;
				height: 34upx;
				background-size: 100% 100%;
				background: url("https://oss-shop.cciinet.com/files/MiniProgram/fanhui.png") no-repeat;
				position: absolute;
				left: 27upx;
			}

			.button {
				position: absolute;
				right: 27upx;
				height: 54upx;
				width: 100upx;
				border: 2upx solid #EA5520;
				background-color: #EA5520;
				border-radius: 27upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				position: absolute;
				right: 20upx;
				font-size: 26upx;
			}

			.top_btn {
				width: 373upx;
				height: 54upx;
				background: #ffffff;
				border: 1upx solid #eeeeee;
				border-radius: 27upx;
				display: flex;

				.p {
					width: 50%;
					text-align: center;
					line-height: 54upx;
					font-size: 30upx;
				}

				.active {
					width: 50%;
					height: 54upx;
					background: #f7f9fe;
					border: 1upx solid #00428e;
					border-radius: 27upx;
					color: #00428e;
					margin-top: -1upx;
					font-weight: bold;
					font-size: 32upx;
				}
			}
		}
	}

	// .supply {
	// 	width: 100%;
	// 	height: 100%;

	// 	.supply_list {
	// 		height: 100%;
	// 		padding: 180upx 31upx 0upx 28upx;

	// 		.list_item {
	// 			height: 178upx;
	// 			background: #fff;
	// 			margin-bottom: 8upx;
	// 			display: flex;
	// 			align-items: center;
	// 			border-radius: 8upx;
	// 			padding-right: 16upx;

	// 			.img {
	// 				width: 154upx;
	// 				height: 154upx;
	// 				border-radius: 8upx;
	// 				margin-left: 10upx;
	// 				margin-right: 15upx;
	// 			}

	// 			.list_info {
	// 				width: 100%;
	// 				display: flex;
	// 				justify-content: space-between;
	// 				flex: 1;

	// 				.h1 {
	// 					font-size: 30upx;
	// 					color: #333333;
	// 					line-height: 1;
	// 					display: flex;
	// 					align-items: center;
	// 					margin-bottom: 31upx;

	// 					span {
	// 						width: 210upx;
	// 						overflow: hidden;
	// 						text-overflow: ellipsis;
	// 						white-space: nowrap;
	// 						word-break: break-all;
	// 					}

	// 					.em {
	// 						display: inline-block;
	// 						width: 79upx;
	// 						height: 32upx;
	// 						background: #fde7dd;
	// 						border-radius: 16upx;
	// 						text-align: center;
	// 						line-height: 32upx;
	// 						font-size: 20upx;
	// 						color: #ea5520;
	// 						margin-left: 10upx;
	// 					}
	// 				}

	// 				.p {
	// 					font-size: 24upx;
	// 					color: #666666;
	// 					width: 300upx;
	// 					overflow: hidden;
	// 					text-overflow: ellipsis;
	// 					white-space: nowrap;
	// 				}
	// 			}

	// 			.h2 {
	// 				font-size: 20upx;
	// 				color: #999999;
	// 			}

	// 			.h3 {
	// 				font-size: 30upx;
	// 				color: #ea5520;
	// 				margin-top: 64upx;
	// 				width: 200upx;
	// 				overflow: hidden;
	// 				text-overflow: ellipsis;
	// 				white-space: nowrap;
	// 			}
	// 		}
	// 	}

	// 	.popup {
	// 		position: fixed;
	// 		top: 170upx;
	// 		left: 0;
	// 		background: rgba(0, 0, 0, 0.1);
	// 		width: 100%;
	// 		height: 100%;

	// 		.classify {
	// 			margin: 0 30upx;
	// 			height: 196upx;
	// 			background: #ffffff;
	// 			border-radius: 8upx;
	// 			margin-top: -8upx;

	// 			.ul {
	// 				display: flex;
	// 				align-items: center;
	// 				height: 196upx;
	// 				justify-content: space-around;

	// 				.li {
	// 					padding: 16upx 24upx;
	// 					border: 1upx solid #eeeeee;
	// 					border-radius: 8upx;
	// 					font-size: 24upx;
	// 					color: #eeeeee;
	// 				}

	// 				.active {
	// 					background: #f7f9fe;
	// 					border: 1upx solid #00428e;
	// 					color: #00428e;
	// 				}
	// 			}
	// 		}

	// 		.i {
	// 			display: inline-block;
	// 			border: 12upx solid;
	// 			border-color: transparent transparent #fff transparent;
	// 			margin-left: 80upx;
	// 		}
	// 	}
	// }

	.supplyDemand>.van-popup {
		width: 690upx;
		height: 500upx;
		border-radius: 8upx;

		.content {
			padding: 50upx 20upx;

			.pd {
				padding: 15upx;
				color: #343434;
			}

			.p3 {
				color: #343434;

				span {
					color: #00428e;
				}
			}

			.p4 {
				text-align: center;
				color: #343434;

				span {
					color: #ea5620;
				}
			}

			.confirm {
				margin: 35upx auto 0;
				width: 500upx;
				height: 88upx;
				line-height: 88upx;
				border: 2upx solid #00428e;
				color: #00428e;
				border-radius: 42upx;
				text-align: center;
			}
		}
	}

	.release_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;
		position: fixed;
		right: 0;
		bottom: 220upx;
		width: 239upx;
		height: 148upx;
		// background: #FFFFFF;
		// box-shadow: 0upx 4upx 16upx 0upx rgba(0, 0, 0, 0.1);
		// border-radius: 50%;
		background: url("https://oss-shop.cciinet.com/files/MiniProgram/fabu_btn.png") no-repeat;
		background-size: 100% 100%;
		margin-bottom: env(safe-area-inset-bottom);

		.inner {
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// width: 80upx;
			// height: 80upx;
			// background: linear-gradient(-13deg, #218EED, #035ABE);
			// border-radius: 50%;
			font-size: 30upx;
			font-weight: bold;
			color: #fff;
			margin-top: 12upx;
		}
	}
</style>
